<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/main.css" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>
  <header>
    <h1>游泳馆实时数据监测</h1>
    <!-- <div class="showTime">当前时间：<span></span></div> -->
  </header>
  <section class="mainbox_s">
    <div class="mainbox_back">
      <div class="mainbox_back_nav ">
        <div class="mainbox_back_nav_people">
          当前场馆人数
        </div>
        <div class="mainbox_back_nav_ren">
          <span class="mainbox_back_nav_ren_span" id="text1"></span><span style="font-size: 0.2rem;">人</span>
        </div>
      </div>
    </div>
    <div class="mainbox_back">
      <div class="mainbox_back_left">
        <div class="mainbox_back_nav_people">
          今日总人数
        </div>
        <div class="mainbox_back_nav_ren">
          <span class="mainbox_back_nav_ren_span" id="text2"></span><span style="font-size: 0.2rem;">人</span>
        </div>
      </div>
    </div>
    <div class="mainbox_back">
      <div class="mainbox_back_conter">
        <div class="mainbox_back_nav_people">
          最大容纳人数
        </div>
        <div class="mainbox_back_nav_ren">
          <span class="mainbox_back_nav_ren_span" id="text3"></span><span style="font-size: 0.2rem;">人</span>
        </div>
      </div>
    </div>
    <div class="mainbox_back">
      <div class="mainbox_back_right">
        <div class="mainbox_back_nav_people">
          累计入馆人数
        </div>
        <div class="mainbox_back_nav_ren">
          <span class="mainbox_back_nav_ren_span" id="text4"></span><span style="font-size: 0.2rem;">人</span>
        </div>
      </div>
    </div>
  </section>
  <section class="mainbox">
    <!-- 左边 -->
    <div class="column">

      <div class="panel_nav ">
        <h2>水质实时监测</h2>
        <div class="panel_nav_info ppp">
          <div class="panel_nav_info_man">
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #6dedcc;border-radius: 50% 50%;"></span>
              <span>实时水温</span>
              <span><span id="text13" style="margin-left: 10px;line-height: 13px;"></span>℃</span>
            </div>
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #c2aaf4;border-radius: 50% 50%;"></span>
              <span>实时水位</span>
              <span><span id="text14" style="margin-left: 10px;line-height: 13px;"></span>m</span>
            </div>
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #ebcfa7;border-radius: 50% 50%;"></span>
              <span>馆内温度</span>
              <span><span id="text15" style="margin-left: 10px;line-height: 13px;"></span>℃</span>
            </div>
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #4b99ec;border-radius: 50% 50%;"></span>
              <span>馆内湿度</span>
              <span><span id="text16" style="margin-left: 10px;line-height: 13px;"></span>%</span>

            </div>
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #81eca4;border-radius: 50% 50%;"></span>
              <span>PH值</span>
              <span><span id="text17" style="margin-left: 10px;line-height: 13px;"></span>%</span>
            </div>
          </div>
        </div>
        <div class="panel_nav_info">
          <img style="width: 5rem;height: 3rem;margin-top: 0.6rem;"
            src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/17c23cb2df93adf252c97813106cffac086c074f.png"
            alt="" srcset="">
        </div>
        <div class="panel_nav_info pppp">
          <div class="panel_nav_info_r">
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #6dedcc;border-radius: 50% 50%;"></span>
              <span>氨氮</span>
              <span><span id="text18" style="line-height: 13px;"></span>mg/L</span>
            </div>
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #c2aaf4;border-radius: 50% 50%;"></span>
              <span>浊度</span>
              <span><span id="text19" style="line-height: 13px;"></span>NTU</span>

            </div>
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #ebcfa7;border-radius: 50% 50%;"></span>
              <span>余氯</span>
              <span><span id="text20" style="line-height: 13px;"></span>MG/L</span>

            </div>
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #4b99ec;border-radius: 50% 50%;"></span>
              <span>ORP</span>
              <span><span id="text21" style="line-height: 13px;"></span>mV</span>

            </div>
            <div class="guns">
              <span style="width: 0.3rem;height: 0.3rem;background-color: #81eca4;border-radius: 50% 50%;"></span>
              <span>TDS</span>
              <span><span id="text22" style="line-height: 13px;"></span>MG/L</span>

            </div>
          </div>
        </div>
      </div>
      <div class="panel_sav ">
        <div class="right_info">
          <div class="public">
            <h2>年卡/次卡价目表</h2>
            <div class="echart wenzi">
              <div class="gun">
                <span>票种</span>
                <span>价格</span>
                <span>使用说明</span>
              </div>
              <div id="FontScroll" class="myscroll ">
                <ul class="clearfix">
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="right_infos ">
          <div class="public">
            <h2>散票价目表</h2>
            <div class="echart wenzi">
              <div class="gun">
                <span>票种</span>
                <span>价格</span>
                <span>使用说明</span>
              </div>
              <div id="FontScroll" class="myscroll">
                <ul class="clear_fix">
                  <!-- <li>
                  <div class="fontInner clearfix">
                    <span style="color: #00deff;">253万</span>
                    <span style="color: #f0c154;">1万</span>
                    <span style="color: #c2aaf4;">182万</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span style="color: #00deff;">253万</span>
                    <span style="color: #f0c154;">2万</span>
                    <span style="color: #c2aaf4;">182万</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span style="color: #00deff;">253万</span>
                    <span style="color: #f0c154;">3万</span>
                    <span style="color: #c2aaf4;">182万</span>
                  </div>
                </li> -->
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- 中间 -->
    <div class="column_left">
      <div class="panel_quanchangs line">
        <div class="public">
          <h2>储物柜余量</h2>
          <div class="panel_quanchangs_p">
            <div class="panel_quanchangs_p1">
              <img style="width: 0.5rem;height: 0.5rem;margin-top: 0.15rem;"
                src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/4ade7b5ad0cda6a755146010b428c1218b8f0549.png"
                alt="">
            </div>
            <div class="panel_quanchangs_p2">男更衣室</div>
            <div class="panel_quanchangs_p3" id="text5"></div>
            <div class="panel_quanchangs_p4">个</div>

          </div>
          <div class="panel_quanchangs_w">
            <div class="panel_quanchangs_w1">
              <img style="width: 0.5rem;height: 0.5rem;margin-top: 0.15rem;"
                src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/66f09f194dc948a36193dec4ede79fd92df4cf77.png"
                alt="">
            </div>
            <div class="panel_quanchangs_w2">女更衣室</div>
            <div class="panel_quanchangs_w3" id="text6"></div>
            <div class="panel_quanchangs_w4">个</div>

          </div>
        </div>
      </div>
      <div class="panel_quanchang">
        <div class="public">
          <div class="panel_quanchangpanel ">
            <span class="panel_quanchangpanel_span"
              style="width: 0.25rem;height: 0.25rem;background-color: #6dedcc;border-radius: 50% 50%;"></span>
            <span class="panel_quanchangpanel_con" id="text7"></span>
          </div>
          <div class="panel_quanchangpanel">
            <span class="panel_quanchangpanel_span"
              style="width: 0.25rem;height: 0.25rem;background-color: #c2aaf4;border-radius: 50% 50%;"></span>
            <span class="panel_quanchangpanel_con" id="text8"></span>
          </div>
          <div class="panel_quanchangpanel">
            <span class="panel_quanchangpanel_span"
              style="width: 0.25rem;height: 0.25rem;background-color: #ebcfa7;border-radius: 50% 50%;"></span>
            <span class="panel_quanchangpanel_con" id="text9"></span>
          </div>
          <div class="panel_quanchangpanel">
            <span class="panel_quanchangpanel_span"
              style="width: 0.25rem;height: 0.25rem;background-color: #4b99ec;border-radius: 50% 50%;"></span>
            <span class="panel_quanchangpanel_con" id="text10"></span>
          </div>
          <div class="panel_quanchangpanel">
            <span class="panel_quanchangpanel_span"
              style="width: 0.25rem;height: 0.25rem;background-color: #81eca4;border-radius: 50% 50%;"></span>
            <span class="panel_quanchangpanel_con" id="text11"></span>
          </div>
          <div class="panel_quanchangpanel">
            <span class="panel_quanchangpanel_span"
              style="width: 0.25rem;height: 0.25rem;background-color: #c2aaf4;border-radius: 50% 50%;"></span>
            <span class="panel_quanchangpanel_con" id="text12"></span>
          </div>
        </div>

      </div>
    </div>
  </section>

  <script src="js/flexible.js"></script>
  <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
  <!-- <script src="js/china.js"></script> -->
  <!-- <script src="js/myMap.js"></script> -->
  <script src="js/jquery-1.12.2.js"></script>
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <!-- <script src="js/vue.js"></script> -->
  <!-- <script src="js/qs.min.js"></script> -->
  <!-- <script src="js/index.js"></script> -->
  <script src="js/fontscroll.js"></script>

  <script>
    $.ajax({
      url: "https://sass-test.doit10019.com/api/sy/index",
      data: {
        venue_id: 213
      },
      success: function (obj) {
        console.log(obj, '9966')
        // 上面一排
        $('#text1').html(obj.data.stat.now_num)
        $('#text2').html(obj.data.stat.today_num)
        $('#text3').html(obj.data.stat.max_num)
        $('#text4').html(obj.data.stat.total_num)
        // 储物柜余量
        $('#text5').html(obj.data.cabinet_stat.man_num)
        $('#text6').html(obj.data.cabinet_stat.woman_num)
        // 说明
        $('#text7').html(obj.data.contents[0])
        $('#text8').html(obj.data.contents[1])
        $('#text9').html(obj.data.contents[2])
        $('#text10').html(obj.data.contents[3])
        $('#text11').html(obj.data.contents[4])
        $('#text12').html(obj.data.contents[5])

        $('#text13').html(obj.data.monitor.water_temp)
        $('#text14').html(obj.data.monitor.water_pos)
        $('#text15').html(obj.data.monitor.venue_temp)
        $('#text16').html(obj.data.monitor.venue_humidity)
        $('#text17').html(obj.data.monitor.ph)
        $('#text18').html(obj.data.monitor.an_dan)
        $('#text19').html(obj.data.monitor.turbidity)
        $('#text20').html(obj.data.monitor.chlorine)
        $('#text21').html(obj.data.monitor.orp)
        $('#text22').html(obj.data.monitor.tds)
        // $('#text23').html(obj.data.cardList)

        // 年卡/次卡价目表
        var content = '';
        var images = obj.data.cardList;
        for (key in images) {
          // content += "<ul>";
          content += "<li>";
          content += "<div style='text-align: center;' class='fontInner'>";
          content += "<span style='color: #00deff;font-size: 0.27rem; '>" + images[key].name + "</span>";
          content += " <span  style='color: #f0c154;font-size: 0.27rem; '>" + images[key].selling_price + "</span>";
          content += "<span style='color: #c2aaf4;font-size: 0.27rem; '>" + images[key].pro_desc + "<br></span>";
          content += "</div>";
          content += "</li>";
          // content += "</ul>";

        }
        $(".clearfix").html(content);
        // 散票价目表
        var content = '';
        var images = obj.data.ticketList;
        for (key in images) {
          content += "<li>";
          content += "<div style='text-align: center;' class='fontInner'>";
          content += "<span style='color: #00deff;font-size: 0.27rem; '>" + images[key].name + "</span>";
          content += " <span  style='color: #f0c154;font-size: 0.27rem; '>" + images[key].selling_price + "</span>";
          content += "<span style='color: #c2aaf4;font-size: 0.27rem; '>" + images[key].pro_desc + "<br></span>";
          content += "</div>";
          content += "</li>";
        }
        $(".clear_fix").html(content);

      },
      dataType: "json",
      async: false
    })
    $(function () {
      $('.myscroll').myScroll({
        speed: 100, //数值越大，速度越慢
        rowHeight: 38 //li的高度
      });
    })
    //-----定时器start-----
    let timer2;
    // 定义定时器函数
    function startTimer() {
      $.ajax({
        url: "https://sass-test.doit10019.com/api/sy/index",
        data: {
          venue_id: 213
        },
        success: function (obj) {
          console.log(obj, '8888')
          // 上面一排
          $('#text1').html(obj.data.stat.now_num)
          $('#text2').html(obj.data.stat.today_num)
          $('#text3').html(obj.data.stat.max_num)
          $('#text4').html(obj.data.stat.total_num)
          // 储物柜余量
          $('#text5').html(obj.data.cabinet_stat.man_num)
          $('#text6').html(obj.data.cabinet_stat.woman_num)
          // 说明
          $('#text7').html(obj.data.contents[0])
          $('#text8').html(obj.data.contents[1])
          $('#text9').html(obj.data.contents[2])
          $('#text10').html(obj.data.contents[3])
          $('#text11').html(obj.data.contents[4])
          $('#text12').html(obj.data.contents[5])

          $('#text13').html(obj.data.monitor.water_temp)
          $('#text14').html(obj.data.monitor.water_pos)
          $('#text15').html(obj.data.monitor.venue_temp)
          $('#text16').html(obj.data.monitor.venue_humidity)
          $('#text17').html(obj.data.monitor.ph)
          $('#text18').html(obj.data.monitor.an_dan)
          $('#text19').html(obj.data.monitor.turbidity)
          $('#text20').html(obj.data.monitor.chlorine)
          $('#text21').html(obj.data.monitor.orp)
          $('#text22').html(obj.data.monitor.tds)
          // $('#text23').html(obj.data.cardList)


          var content = '';
          var images = obj.data.cardList;
          for (key in images) {
            // content += "<ul>";
            content += "<li>";
            content += "<div style='text-align: center;' class='fontInner'>";

            content += "<span style='color: #00deff;font-size: 20px; '>" + images[key].name + "</span>";

            content += " <span  style='color: #f0c154;font-size: 20px; '>" + images[key].selling_price + "</span>";

            content += "<span style='color: #c2aaf4;font-size: 20px; '>" + images[key].pro_desc + "<br></span>";
            content += "</div>";

            content += "</li>";
            // content += "</ul>";


          }
          $(".clearfix").html(content);



          var content = '';
          var images = obj.data.ticketList;
          for (key in images) {
            content += "<li>";
            content += "<div style='text-align: center;' class='fontInner'>";
            content += "<span style='color: #00deff;font-size: 20px; '>" + images[key].name + "</span>";
            content += " <span  style='color: #f0c154;font-size: 20px; '>" + images[key].selling_price + "</span>";
            content += "<span style='color: #c2aaf4;font-size:20px; '>" + images[key].pro_desc + "<br></span>";
            content += "</div>";

            content += "</li>";
          }
          $(".clear_fix").html(content);

        },
        dataType: "json",
        async: false
      })

    }
    // 开启定时器
    timer2 = setInterval(startTimer, 60000);
    //-----定时器end-----

  </script>
  <script src="js/fontscroll.js"></script>

</body>

</html>